<template>
  <div>
    <!-- 外层容器 -->
    <el-container>
      <!-- 上半区域：顶栏 -->
      <el-header class="layout-header1">
        <!-- 顶栏的标题文字 -->
        <h1>兜兜集用户个人主页(暂用)</h1>
      </el-header>
      <!-- 下半区域 -->
      <el-container class="layout-body">
        <!-- 下半区域的左侧边栏 -->
        <el-aside class="layout-aside1" style="width: 200px">
          <el-menu
              router
              :default-active="$router.currentRoute.path"
              class="el-menu-vertical-demo"
              background-color="#fff"
              text-color="#222"
              active-text-color="#fff">
            <!-- 首页 -->
            <el-menu-item index="/frontEnd/homePage" style="margin-top: 40px">
              <i class="el-icon-orange"></i>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/frontEnd/postArticle" >
              <i class="el-icon-circle-plus-outline"></i>
              <span>发布</span>
            </el-menu-item>
            <el-menu-item index="/frontEnd/space" >
              <i class="el-icon-guide"></i>
              <span>个人主页</span>
            </el-menu-item>
            <el-menu-item index="/frontEnd/userdata" >
              <i class="el-icon-suitcase"></i>
              <span>个人资料</span>
            </el-menu-item>
            <el-menu-item index="/frontEnd/PersonalCommentsList" >
              <i class="el-icon-chat-line-round"></i>
              <span>我的评论</span>
            </el-menu-item>
            <el-menu-item index="" >
              <i class="el-icon-shopping-bag-2"></i>
              <span>购物中心</span>
            </el-menu-item>
            <el-menu-item index="" >
              <i class="el-icon-shopping-cart-2"></i>
              <span>购物车</span>
            </el-menu-item>
            <el-menu-item index="" >
              <i class="el-icon-box"></i>
              <span>我的订单</span>
            </el-menu-item>

          </el-menu>
        </el-aside>

        <!-- 下半区域的右侧主体 -->
        <el-main class="layout-main">
          <!-- 由其它视图组件来显示 -->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.layout-header1 {
  background: #1684b0;

}

.layout-header1 h1 {
  margin: 0;
  color: #fff;
  line-height: 60px;
}

.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;

}

.layout-aside1 {
  padding: 0;
  background: #fff;
}

.layout-aside .el-menu {
  border: 15px;

}

.layout-aside i {
  color: #222 !important;
}

.layout-main {
  background: #fff;
}

.el-menu-item.is-active {
  color: #3A71A8 !important; /* 选中后字体颜色为蓝色 */
  font-weight: bold !important; /* 选中后菜单项字体加粗 */
}

.el-divider--vertical {

  display: inline-block;
  width: 1px;
  height: 20em;
  margin: 10px 8px;
  vertical-align: middle;
  position: relative;
}
</style>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {

  }
}
</script>